<template>
  <div class="progress">
    <div class="progress-basic">
      <p class="progress-basic-title">圆环进度条</p>
      <div class="progress-basic-content">
        <div class="progress-item flex">
          <div class="item">
            <p>基础进度条</p>
            <vc-progress type="circle" :value="50" />
          </div>
          <div class="item">
            <p>圆角进度条</p>
            <vc-progress type="circle" stroke-linecap="round" :value="50" />
          </div>
          <div class="item">
            <p>渐变背景</p>
            <vc-progress
              type="circle"
              :value="0"
              :background="['rgba(0,0,0,0.01)', 'rgba(0,0,0,0.3)']"
            />
          </div>
          <div class="item">
            <p>渐变颜色</p>
            <vc-progress type="circle" :value="100" :color="['#0ae787', '#fe653c']" />
          </div>
        </div>
        <div class="progress-item flex">
          <div class="item">
            <p>显示文字</p>
            <vc-progress type="circle" :value="50" :show-text="true" />
          </div>
          <div class="item">
            <p>逆时针</p>
            <vc-progress type="circle" :value="50" :show-text="true" :clockWise="false" />
          </div>
          <div class="item">
            <p>加宽</p>
            <vc-progress type="circle" :value="50" :show-text="true" :strokeWidth="10" />
          </div>
          <div class="item">
            <p>扇形图</p>
            <vc-progress type="circle" :width="80" :value="50" :strokeWidth="40" />
          </div>
        </div>
        <div class="progress-item flex">
          <div class="item">
            <p>简单条形圆环</p>
            <vc-progress type="circle" :value="50" :part="4" :partGap="5" />
          </div>
          <div class="item">
            <p>切割条形圆环</p>
            <vc-progress type="circle" color="#00bbff" :value="50" :part="40" :partGap="6" />
          </div>
          <div class="item">
            <p>渐变色条形圆环</p>
            <vc-progress
              type="circle"
              :color="['#0ae787', '#fe653c']"
              :value="50"
              :part="20"
              :partGap="4"
            />
          </div>
          <div class="item">
            <p>自定义颜色</p>
            <vc-progress
              type="circle"
              :gradients="gradients"
              :value="100"
              :part="10"
              :partGap="4"
            />
          </div>
        </div>
        <div class="progress-item flex">
          <div class="item">
            <p>自定义背景、颜色</p>
            <vc-progress
              type="circle"
              :gradients="gradients2"
              :value="50"
              :part="10"
              :partGap="4"
            />
          </div>
          <div class="item">
            <p>基础动画进度条</p>
            <vc-progress type="circle" :animate="true" :value="10" />
          </div>
          <!-- <div class="item">
            <p>环形渐变</p>
            <vc-progress type="conicCircle" :value="10" />
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { CheckCircleFilled } from '@ant-design/icons-vue';
  const gradients = {
    id: 'svg-linear-gradient001',
    x1: '100%',
    y1: '100%',
    x2: '0%',
    y2: '0%',
    colorStops: [
      {
        offset: '0%',
        color: '#0ae787',
      },
      {
        offset: '100%',
        color: '#fe653c',
      },
    ],
  };
  const gradients2 = [
    {
      id: 'svg-linear-gradient002',
      x1: '100%',
      y1: '100%',
      x2: '0%',
      y2: '0%',
      colorStops: [
        {
          offset: '0%',
          color: 'rgba(255,255,255,1)',
        },
        {
          offset: '100%',
          color: 'rgba(0,0,0,1)',
        },
      ],
    },
    {
      id: 'svg-linear-gradient003',
      x1: '100%',
      y1: '100%',
      x2: '0%',
      y2: '0%',
      colorStops: [
        {
          offset: '0%',
          color: '#0ae787',
        },
        {
          offset: '100%',
          color: '#fe653c',
        },
      ],
    },
  ];
</script>

<style lang="less" scoped>
  .progress {
    &-basic {
      &-title {
        font-size: 18px;
        font-weight: 700;
        margin-left: 10px;
        margin-top: 15px;
      }
      &-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
      }
    }
    &-item {
      width: 50%;
      padding: 10px;
      .item {
        width: 25%;
        padding: 10px;
      }
    }
  }
</style>
